<template>
  <el-page-header
    content="编辑博客"
    @back="handleBack()"
    title="博客管理"
  />
  <el-card>
    <el-form
      ref="blogFormRef"
      :model="blogForm"
      :rules="blogFormRules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item
        label="标题"
        prop="title"
      >
        <el-input v-model="blogForm.title" />
      </el-form-item>
      <el-form-item
        label="内容"
        prop="content"
      >
        <Editor
          v-if="blogForm.content"
          @getContent="handleChange"
          :content="blogForm.content"
        />
      </el-form-item>
      <el-form-item
        label="类别"
        prop="category"
      >
        <el-select
          v-model="blogForm.category"
          class="m-2"
          placeholder="请选择"
          style="width:1014px"
        >
          <el-option
            v-for="item in categoryOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="封面"
        prop="cover"
      >
        <UploadAvatar
          :avatar="blogForm.cover"
          @handle="handleUpload"
        ></UploadAvatar>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm()"
        >
          保存草稿
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import axios from "axios";
import upload from '@/utils/upload';
import UploadAvatar from '../../components/upload/UploadAvatar.vue'
import { useRouter } from "vue-router";
import { useRoute } from 'vue-router';

import Editor from '../../components/editor/Editor.vue'
const blogFormRef = ref()
const router = useRouter()
const route = useRoute()
const blogForm = reactive({
  title: '',
  content: '',
  category: 1, // 1 - 技术文章 2 - 热点新闻 3 - 日常杂谈
  cover: '',
  file: '',
  isPublish: 0 // 0 - 未发布 1 - 已发布
})
const blogFormRules = reactive({
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
  content: [{ required: true, message: "请输入内容", trigger: "blur" }],
  category: [{ required: true, message: "请选择分类", trigger: "blur" }],
  cover: [{ required: true, message: "请选择封面", trigger: "blur" }],
  isPublish: [{ required: true, message: "请选择发布状态", trigger: "blur" }]
});
const categoryOptions = [
  {
    label: "技术文章",
    value: 1
  },
  {
    label: "热点新闻",
    value: 2
  },
  {
    label: "日常杂谈",
    value: 3
  }
];
const handleChange = (content) => {
  blogForm.content = content
}
// 每次选择完图片之后的回调
const handleUpload = (file) => {
  blogForm.cover = URL.createObjectURL(file);
  blogForm.file = file;
}
const submitForm = () => {
  blogFormRef.value.validate(async (valid) => {
    if (valid) {
      await upload('/adminapi/blog/list', blogForm)
      router.back()
    }
  })
}
const handleBack = () => {
  router.back()
}
onMounted(async () => {
  const res = await axios.get(`/adminapi/blog/list/${route.params.id}`)
  Object.assign(blogForm, res.data.data[0])
})
</script>

<style lang="scss" scoped>
.el-card,
.el-form {
  margin-top: 20px;

  .el-input {
    width: 1014px;
  }
}
</style>